<template>
  <div class="filelist">
    <draggable element="ul" v-model="obj[mykey]">
      <div class="imgbox" v-for="(item, i) in obj[mykey]" :key="i">
        <i class="icon-abl-close el-icon-error" @click="removePic(i)"></i>
        <vimage class="el_img" fit="cover" :src="item.url"></vimage>
      </div>
    </draggable>
    <div class="imgbox" @click="opendialog"><img class="tempimg"    src='@/assets/images/addimg.png' /></div>
    <el-dialog class="selectimg" title="图片选择器" :visible.sync="drawer" destroy-on-close width="1000px" append-to-body>
      <SelectImg @closepup='closepup' :limit="imglimit" :data="imgdata" @changeImg="changeImg"></SelectImg>
    </el-dialog>
  </div>
  <!--      <el-upload
     :action="url+'/madmin/upload/images'"
      multiple
      :show-file-list="false"
      :on-success="handleImageSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      name='images[]'
      >
        <div class="imgbox">
          <i class="el-icon-plus"></i>
        </div>
      </el-upload> -->
</template>

<script>
import draggable from 'vuedraggable';
import SelectImg from '@/components/SelectImg/index';
export default {
  name: 'MultiPicUpload',
  props: {
    obj: {
      type: Object,
      default: {}
    },
    mykey:{
      type:String,
      default:'slideshow'
    }

  },
  data() {
    return {
      url: process.env.VUE_APP_BASE_API,
      imglimit: 10,
      drawer: false,
      imgdata: []
    };
  },
  created() {
    //console.log(this.obj)
  },
  components: {
    draggable,
    SelectImg
  },
  methods: {
    closepup(){
      this.drawer=false
    },
    opendialog() {
      this.imgdata = [];
      this.obj[this.mykey].forEach(a => {
        this.imgdata.push({
          pic_path: a.url
        });
      });
      this.drawer=true
    },
    //上传成功回调
    changeImg(list) {
      this.obj[this.mykey] = [];
      list.forEach(a => {
         this.obj[this.mykey].push({
          url: a.pic_path
        });
      });
      this.drawer = false;
      // this.obj.slideshow.push({
      //   url:this.url+'/'+res.msg[0].replace("\\","/")
      // });
    },
    //删除数组中图片,自定义
    removePic(i) {
       this.obj[this.mykey].splice(i, 1);
    },
    //上传失败回调
    handleError(err, file, fileList) {
      //console.log(JSON.parse(Object.create(err).message).msg)
      this.$alert(JSON.parse(err.message).msg);
    },
    //删除数组中图片,原生
    handleRemove(file, fileList) {}
  }
};
</script>
<style lang="scss" scoped>
.filelist {
  display: flex;

  ul {
    display: flex;
  }

  .imgbox {
    position: relative;
    width: 100px;
    text-align: center;
    height: 100px;
    line-height: 100px;
    box-sizing: border-box;
    font-size: 28px;
    background-color: #fff;
    // border: 1px dashed #d9d9d9;
    border-radius: 6px;
    color: #8c939d;
    margin-right: 15px;
    .tempimg{
      width: 100px;
      height: 100px;
    }
    .el_img {
      width: 100px;
      height: 100px;
    }

    .icon-abl-close {
      position: absolute;
      z-index: 1;
      font-size: 20px;
      right: -10px;
      top: -10px;
      cursor: pointer;
      display: none;
    }

    &:hover {
      // border-color: #1890ff;

      .icon-abl-close {
        display: block;
        color: #1890ff;
      }
    }
  }
}

//覆盖148px正方形区域样式
.up100 {
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 110px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
}
.el-upload--picture-card {
  background: #fff;
}
</style>
